<template>
	<u-popup :show="showFixPro" :closeable="closeable" mode="bottom" @close="closeModal">
		<view class="title">
			选择维修项目
		</view>
		<scroll-view scroll-y="true" class="actionheight" v-if="allProjectList && allProjectList.length>0">
			<u-checkbox-group v-model="checkboxValue1" placement="column" v-if="!single">
				<u-checkbox class="item" v-for="(item, index) in allProjectList" :key="index"
					:label="item.fixProjectName" :name="item.id">
				</u-checkbox>
			</u-checkbox-group>
			<view class="item" v-for="(item,index) in allProjectList" :key="index" @click="changeItem(item)" v-else>
				{{item.fixProjectName}}
			</view>

		</scroll-view>
		<view class="footer" @click="close" v-if="!single">确定</view>
	</u-popup>
</template>

<script>
	import {
		getFixListAll
	} from '@/api/common.js'
	export default {
		props: {
			showFixPro: {
				type: Boolean,
				default: false
			},
			single: {
				type: Boolean,
				default: false
			},
			checkboxValue:{}
		},

		data() {
			return {
				closeable: true,
				allProjectList: [],
				checkboxValue1: [],
			}
		},
		mounted() {
			this.getAllFixAll()
		},

		methods: {
			close() {
				if (!this.single) {
					let str = ''
					if (this.checkboxValue1.length > 0) {
						let fixProjectName = []
						const newList = this.allProjectList.filter((item) =>
							this.checkboxValue1.includes(item.id)
						);
						for (let i = 0; i < newList.length; i++) {
							fixProjectName.push(newList[i].fixProjectName)
						}
						str = fixProjectName.toString()
						console.log('newList', newList)
					} else {
						str = ''
					}
					console.log('fixProjectName', str)
					this.$emit('closeFix', str, this.checkboxValue1)
				} else {
					this.$emit('closeFix')
				}

			},
			closeModal(){
				this.$emit('closeModal')
			},

			getAllFixAll() {
				getFixListAll({
					fixProjectName: ''
				}).then(response => {
					this.allProjectList = response.data
				})
			},
			changeItem(item) {
				this.$emit('changeFixItem', item)
			},


		},
		watch:{
			showFixPro(val){
				if(val){
					this.checkboxValue1=this.checkboxValue
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 32rpx;
		color: #303133;
		font-weight: bold;
		text-align: center;
		padding: 24rpx 60rpx
	}

	.actionheight {
		height: 60vh;
		padding-bottom: 20rpx;


		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1rpx solid #F5F7F9;
			font-size: 30rpx;
			padding: 30rpx 0;

			&:last-child {
				border-bottom: 1rpx solid #F5F7F9;
			}
		}
	}

	.footer {
		width: 686rpx;
		height: 104rpx;
		background: #407FFF;
		border-radius: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: fixed;
		// bottom: 118rpx;
		// left: 38rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin: 0 auto;

	}
</style>
